<template>
  <div class="tinymce-editor">
    <editor
      id="tinymce"
      v-model="myValue"
      :init="init"
      @onClick="onClick"
    ></editor>
  </div>
</template>
<script>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from "tinymce/tinymce"; // tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";

// 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css'
import "tinymce/themes/silver/theme.min.js";
// import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'
// import 'tinymce/models/dom/model.min.js' // 这里没有引用，所以报错了！！！

// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/help";
import { fileUpload } from "@/api";
// import func from 'vue-editor-bridge';
// import { callbackify } from "util";
export default {
  components: {
    Editor,
  },
  name: "Tinymce",
  props: {
    // 默认的富文本内容
    value: {
      type: String,
      default: "",
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: window.location.origin ? window.location.origin : "",
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "link lists image code table wordcount media preview fullscreen help",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo | formatselect | bold italic underline | forecolor backcolor | link unlink code lists table image | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | removeformat | fullscreen preview",
    },
    height: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url: `tinymce/langs/zh_CN.js`,
        language: "zh_CN",
        skin_url: `tinymce/skins/ui/oxide`,
        // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
        convert_urls: false,
        height: this.height,
        // content_css（为编辑区指定css文件）,加上就不显示字数统计了
        // content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,
        // （指定需加载的插件）
        plugins: this.plugins,
        contextmenu: "paste | link image inserttable | cell row column deletetable",
        toolbar: this.toolbar, // （自定义工具栏）

        statusbar: true, // 底部的状态栏
        // edit  富文本编辑器编辑按钮
        menubar: "file  insert view format table tools", // （1级菜单）最上方的菜单 help 帮助
        branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
        paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)
          // console.log(failure)
          // 图片上传到服务器
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          fileUpload(formData)
            .then((response) => {
              if (response.code == 200) {
                success(response.data[0].url);
              } else this.$message.error("图片插入失败:", response.msg);
            })
            .catch((err) => {
              console.log("异常：",err)
              failure("err: ", err);
            });

          // 模板测试
          // axios({
          // 	method: 'post',
          // 	url: "http://localhost:8080/file/upload",
          // 	data: formData,
          // }).then(function(res) {
          // 	console.log("======================<<<<")
          // 	console.log(res.data)
          // 	let file = res.data;
          // 	success(file);
          // }).catch(function(err) {
          // 	console.log(err)
          // })
        },
        // init_instance_callback: function (editor) {
        //   document.querySelector("button.tox-statusbar__wordcount").click()
        // }
        // 编辑器回调函数
        init_instance_callback: editor => {
          let that= this
          if (that.value) {
            editor.setContent(that.value);
          }
          that.hasInit = true;

          editor.on("NodeChange Change KeyUp SetContent", () => {
            that.hasChange = true;
            // const val = editor.getContent().replace(/<p><img\s?src="data.*?<\/p>/g, '')
            that.$emit("input", editor.getContent());
          });

          editor.on("paste", evt => {
            // 监听粘贴事件
            console.log("监听粘贴事件", evt);
            that.onPaste(evt);
          });
        },
      },
       
      myValue: this.value,
      selectorId: new Date().getTime(), //避免重复使用同一个div编辑器
      reloading: false,
      
    };
  },
  mounted() {
    tinymce.init({});

  },
  methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    reload() {
      this.reloading = true;
      this.$nextTick(() => (this.reloading = false));
    },
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    //可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    },
    /**
     * 自动判断父级是否是 <a-tabs/> 组件，然后添加事件监听，自动触发reload()
     *
     * 由于 tabs 组件切换会导致 tinymce 无法输入，
     * 只有重新加载才能使用（无论是vue版的还是jQuery版tinymce都有这个通病）
     */
    initATabsChangeAutoReload() {
      // 获取父级
      let tabs = getVmParentByName(this, "ATabs");
      let tabPane = getVmParentByName(this, "ATabPane");
      let modal = getVmParentByName(this, "AModal");
      if (tabs && tabPane) {
        // 用户自定义的 key
        let currentKey = tabPane.$vnode.key;
        // 添加事件监听
        tabs.$on("change", (key) => {
          // 切换到自己时执行reload
          if (currentKey === key) {
            this.reload();
          }
        });
      } else if (modal) {
        console.log("tinymce reload!");
        this.reload();
      }
    },
    // 复制黏贴操作
    onPaste(event, success, failure){
      let self = this;
      // 实现图⽚粘贴上传
      const items = (event.clipboardData || window.clipboardData).items;
      // items为伪数组微信/QQ截图以及此富⽂本区域内复制粘贴的length为1,⿏标右键复制粘贴图⽚以及⽂本的复制粘贴的length为2;
      let len = items.length;
      for (let i = 0; i < len; i++) {
        console.log("剪贴板类型file与type===>",items[i])
        if (items[i].kind == "file" && items[i].type.indexOf("image") != -1) {
          // 判断是否为图⽚类型
          event.preventDefault(); // 如果是图⽚阻⽌⾃动粘贴到富⽂本编辑器
          let file = items[i].getAsFile(); // 获取⽂件数据
          let blob = new Blob([file], { type: file.type }); //实例化⼀个blob 将图⽚⼤⼩以及类型初始化到blob⾥
          // let index = file.name.lastIndexOf(".");
          // let fileName =
          //   Date.now() + file.name.substring(index, file.name.length);
          // fileName --- 图⽚名称可⾃⾏处理
          console.log("粘贴的是图⽚类型", blob, file);
          // let file = blobInfo.blob();
          // let CancelToken = axios.CancelToken;
          const isLt2M = file.size / 1024 < 50000;
          if (!isLt2M) {
            // failure("上传失败，图片不可超过50000KB!");
            this.$message.error("图片插入失败: 请将图片压缩到5M以下")
            return false;
          }
          // 图片上传到服务器
          const formData = new FormData();
          formData.append("file", file);
          fileUpload(formData)
            .then((response) => {
              if (response.code == 200) {
                // 图⽚上传成功,插⼊到富⽂本编辑器
                if (response.data.length>=0 && response.data[0].url) {
                  tinymce.execCommand(
                    "mceReplaceContent",
                    false,
                    `<img class='wscnph' src='${response.data[0].url}' />`
                  );
                }
              } else this.$message.error("图片插入失败:", response.msg);
            })
            .catch((err) => {
              console.log("异常：",err)
              failure("err: ", err);
            });
        } else if(items[i].kind == "string" && items[i].type.indexOf("html") != -1){
          // Word或者HTML中的图片处理
          // 正则匹配：src="file:////private/var/folders/1z/ypkf8gd54g14y2r_4bt9p4200000gp/T/com.kingsoft.wpsoffice.mac/wps-dogSleep/ksohtml/wpslJYf0H.jpg" 
          
          // let filePath = "file:////private/var/folders/1z/ypkf8gd54g14y2r_4bt9p4200000gp/T/com.kingsoft.wpsoffice.mac/wps-dogSleep/ksohtml/wpslJYf0H.jpg"

          // let file = new File([],filePath)
          // this.uploadFile(file)

          let reader = new FileReader();
          reader.onload = function(e){
            callbackify(e.target.result)
          }

        }else{
          // 不是图⽚类型直接粘贴, 跳过oss上传处理
          console.log("粘贴的不是图⽚");
        }
      }
    },
    // 文件上传
    uploadFile(file){
      console.log("文件上传----》",file)
      // 图片上传到服务器
      const formData = new FormData();
      formData.append("file", file);
      fileUpload(formData)
        .then((response) => {
          if (response.code == 200) {
            // 图⽚上传成功,插⼊到富⽂本编辑器
            if (response.data.length>=0 && response.data[0].url) {
              tinymce.execCommand(
                "mceReplaceContent",
                false,
                `<img class='wscnph' src='${response.data[0].url}' />`
              );
            }
          } else this.$message.error("图片插入失败:", response.msg);
        })
        .catch((err) => {
          console.log("异常：",err)
          failure("err: ", err);
        });
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue == null ? "" : newValue;
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit("change", newValue);
      } else {
        this.$emit("input", newValue);
      }
    },
  },
};
</script>



